<template>
	<view class="container p30">
		<!--  头像 -->
		<view class="avator">
			<view class="title">
				头像
			</view>
			<view class="pic" @click="viewImg(userInfo.avatarUrl)">
				<image :src="userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="back">
				<image src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
		</view>
		<!-- 姓名 -->
		<view class="name">
			<view class="title">我的姓名</view>
			<input type="text" :disabled='true' v-model="userInfo.nickName" />
		</view>
		<!-- 手机号 -->
		<view class="name">
			<view class="title">手机号</view>
			<input type="number" :disabled='true' v-model="userInfo.userInfo.phone" />
		</view>
		<!-- 居住信息 -->
		<view class="name" style="height: 130rpx;align-items: flex-start;padding-top: 30rpx;">
			<view class="title">居住信息</view>
			<!-- <textarea :disabled='true' v-model="userInfo.userInfo.community + userInfo.userInfo.roomInfo" placeholder="" /> -->
			<view class="address">
				{{ userInfo.userInfo.community + userInfo.userInfo.roomInfo }}
			</view>
		</view>
		<view class="btn" @click="back">
			确定
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				userInfo: {},
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					that.userInfo = res.data
					console.log('用户信息', that.userInfo)
				},
				fail: (res) => {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				}
			})
		},
		methods: {
			//  图片点击预览
			viewImg(url){
				//  防止不传urls报错！
				let arr = []
				arr.push(url)
				uni.previewImage({
					current: url,
					urls: arr
				})
			},
			back() {
				uni.navigateBack()
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.title{
		width: 200rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.avator{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		height: 138rpx;
		border-bottom: 2rpx solid rgba(51, 51, 51, .1);
		.pic{
			flex: 1;
			text-align: right;
			&>image{
				// display: block;
				float: right;
				width: 87rpx;
				height: 87rpx;
				border-radius: 50%;
			}
		}
		.back{
			height: 36rpx;
			width: 36rpx;
			margin-left: 56rpx;
			&>image{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.name{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 115rpx;
		border-bottom: 2rpx solid rgba(51, 51, 51, .1);
		&>input{
			flex: 1;
			margin-top: 2rpx;
			color: rgba(153, 153, 153, 1);
			font-size: 32rpx;
			font-family: PingFang SC;
		}
		.address{
			flex: 1;
			height: 100rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
	.btn{
		height: 90rpx;
		margin: 300rpx 0rpx 0rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		border-radius: 45rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	
</style>
